<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#box{
				width: 250px;
				height: 240px;
				background: red;
				margin: 30px;
				position: relative;
			}
		</style>
		<!--张三打李四 王五蹲着一边一五一十的记了下来  王五就是事件对象-->
		<!--记录事件发生的一些信息的就是事件对象-->
		<!--事件对象只有在事件发生时产生 局部变量 -->
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				
				box.onclick = function(e){
					//1.获取事件对象
					var ev = window.event || e;
					//2.获取鼠标距离浏览器的位置
					var docX = ev.clientX;//鼠标距离浏览器X轴的位置
					var docY = ev.clientY;//鼠标距离浏览器Y轴的位置
					
					//3.
//					注:如果还是获得鼠标和可视区域边缘的距离 那么解决方案就是给事件源元素加个定位 这是因为浏览器内置语法解析的问题
					var evsourceX = ev.offsetX || ev.layerX;//鼠标距离事件源X轴的位置
					var evsourceY = ev.offsetY || ev.layerY;//鼠标距离事件源y轴的位置
					alert(evsourceY);
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
